<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合式风格生命周期</title>
</head>
<body>
<div id="app">
    <h1 ref="grate">世界， 你好！</h1>
    <h1>{{ message }}</h1>

    <button v-on:click="message='abc'">更新</button>
</div>

<script !src="" type="module">
    import {createApp, ref} from "../../../../js/vue.esm-browser.js";
    import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated} from "../../../../js/vue.esm-browser.js";


    let app = createApp({
        setup() {
            let message = ref("Hello, World!")
            let grate = ref(null)

            console.group("setup 运行时的状态")
            console.log("%c%s", "color:red", message.value)
            console.log("%c%s", "color:red", grate.value)
            console.groupEnd()

            // 对象挂载之前
            onBeforeMount(function () {
                console.group("onBeforeMount 运行时的状态")
                console.log("%c%s", "color:green", message.value)
                // 在没有挂载之前，不能找到 grate
                // console.log("%c%s", "color:green", grate.value.textContent)
                console.groupEnd()
            })

            // 对象已经挂载完成
            onMounted(function () {
                console.group("onMounted 运行时的状态")
                console.log("%c%s", "color:green", message.value)
                console.log("%c%s", "color:green", grate.value.textContent)
                console.groupEnd()
            })

            onBeforeUpdate(function () {
                console.group("onBeforeUpdate 运行时的状态")
                console.log("%c%s", "color:green", message.value)
                console.log("%c%s", "color:green", grate.value.textContent)
                console.groupEnd()
            })

            onUpdated(function () {
                console.group("onUpdated 运行时的状态")
                console.log("%c%s", "color:green", message.value)
                console.log("%c%s", "color:green", grate.value.textContent)
                console.groupEnd()
            })

            return {
                message,
                grate,
            }
        }
    })

    app.mount("#app")

</script>
</body>
</html>